<template>
	<view class="applyRefund">
		<view>
			<view class="goodsInfo" v-for="(item,index) in list">
				<image :src="item.pic" mode=""></image>
				<view class="goods_texts">
					<view class="goods_title">{{ item.name }}</view>
					<view class="goods_num">{{ item.ggname }} x{{item.num}}</view>
					<view class="between">
						<view class="goods_money">￥{{ item.sell_price }}</view>
						<view class="flex" v-if="orderType!=1&&orderType!=2">
							<view class="minus bg flex-center" @click="gwcminus(index,item.id,refundNum[index].num)">-
							</view>
							<view class="numBox flex-center">{{refundNum[index].num}}</view>
							<view class="plus bg flex-center"
								@click="gwcplus(index,item.id,item.num-item.refund_num,refundNum[index].num)">+
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="goods_stauts">{{getStatusType(item.status)}}</view> -->
			</view>
		</view>
		<view class="refund_info">
			<view class="">
				<view class="info_name">退款原因</view>
				<picker @change="reasonChange" :range="reasonList" range-key="text">
					<view class="" v-if="reason">{{reason.text}}</view>
					<view class="tips" v-else>请选择</view>
				</picker>
				<uni-icons type="forward" size="16" color="#999999"></uni-icons>
			</view>
			<view class="">
				<view class="info_name">退款金额</view>
				<view class="refund_money">￥{{refundPrice}}</view>
			</view>
			<view class="refund_explain">
				<view class="info_name">退款说明</view>
				<textarea style="height: 140rpx;" v-model="reasonText" placeholder="请简单说明退款原因..."></textarea>
			</view>
		</view>
		<view class="upload_img">
			<view class="upload_img_t">
				<view class="title">上传凭证</view>
				<view class="tips">最多6张</view>
			</view>
			<view class="imgList">
				<view class="img" v-if="imgList.length<6" @click="chooseFile">
					<image src="https://wx.2024csnl.com/static/mine/uplaod_img.png" mode=""></image>
				</view>
				<view class="img" v-for="(item,index) in imgList" :key="index">
					<image :src="item" mode=""></image>
					<view class="del_btn" @click="deleteImg(index)">
						<uni-icons type="close" size="24"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="subBtn flex-center" @click="onMyOrderRefund()"> 提交申请</view>
	</view>
</template>

<script>
	import {
		myOrderRefundDetails,
		myOrderRefund
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				reasonText: '', //退款原因
				orderid: '',
				isAgency: getApp().globalData.isAgency,
				refundPrice: null, //退款金额
				totalprice: '', //订单总价
				refundNum: [],
				list: [],
				reasonList: [{
						value: 0,
						text: "我要退款(无需退货)"
					},
					{
						value: 1,
						text: "我要退货退款"
					},
				],
				reason: null,
				imgList: [],
				orderType: null,
			};
		},
		onLoad(opt) {
			this.getMyOrderRefundDetails(opt.id, opt.type)
			this.orderType = opt.type
			this.totalprice = opt.totalPrise
			this.orderid = opt.id
			this.refundPrice = this.totalprice
		},
		methods: {
			// 退款
			async onMyOrderRefund() {
				switch (true) {
					case this.reason == null:
						this.showToast('请选择退款原因')
						break;
					case this.reasonText == '':
						this.showToast('请输入退款说明')
						break;
				}
				const res = await myOrderRefund('s=/ApiOrder/refund', {
					orderid: this.orderid,
					reason: this.reasonText,
					money: this.refundPrice,
					content_pic: this.imgList,
					refundNum: this.refundNum,
					ordertype:this.orderType,
					type: this.reason == 0 ? 'refund' : 'return'
				})
				const {
					status,
					msg
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					this.goBack(2000)
				}
			},
			//上传图片
			async chooseFile() {
				uni.chooseImage({
					count: 6 - this.imgList.length,
					sourceType: ['album'],
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						})
						// console.log(res,"res---")
						res.tempFilePaths.forEach(item => {
							this.upImg(item)
						})
					}
				});
			},
			upImg(path) {
				let BASE_URL = getApp().globalData.BASE_URL
				let platform = 'app'
				// #ifdef H5
				if (this.isAgency) {
					platform = 'h5'
					BASE_URL = '/api'
				}
				// #endif
				uni.uploadFile({
					url: `${BASE_URL}?s=/ApiImageupload/uploadImg&aid=1&platform=${platform} `,
					filePath: path,
					name: 'file',
					// #ifndef H5
					header: {
						'content-type': 'multipart/form-data'
					},
					// #endif
					success: (res) => {
						// console.log(res, "上传成功")
						const data = JSON.parse(res.data);
						// console.log(data, "data")
						const {
							msg,
							status,
							url
						} = data
						if (status == 1) {
							this.imgList.push(url)
						}
						uni.hideLoading();
					}
				});
			},
			calculate() {
				let val = 0
				let a = this.refundNum.forEach((item, i) => {
					val += item.num * item.price
				})
				this.refundPrice = val.toFixed(2)
			},
			//加
			gwcplus(index, id, maxnum, num) {
				console.log(maxnum, num)
				if (num >= maxnum) {
					return;
				}
				this.refundNum[index].num += 1
				this.calculate();
			},
			//减
			gwcminus(index, id, num) {
				if (num == 0) return;
				this.refundNum[index].num -= 1
				this.calculate();
			},
			getStatusType(status) {
				return status == 0 ? '待支付' : status == 1 ? '待发货' : status == 2 ? '待收货' : status == 3 ? '已完成' : status ==
					4 ? '已关闭' : ''
			},
			async getMyOrderRefundDetails(id, type) {
				const res = await myOrderRefundDetails('s=/ApiOrder/refundinits', {
					id: id,
					ordertype: type
				})
				const {
					status,
					data,
					msg
				} = res.data
				if (status == 1) {
					this.list = data
					this.list.forEach(item => {
						this.refundNum.push({
							ogid: item.id,
							num: item.canRefundNum,
							price: item.totalprice
						})
					})
					// console.log(res, "res----", this.refundNum)
				} else {
					this.showToast(msg)
				}
			},
			reasonChange(e) {
				this.reason = this.reasonList.find(item => item.value == e.detail.value);
			},
			deleteImg(index) {
				this.$delete(this.imgList, index)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.subBtn {
		width: 100%;
		height: 88rpx;
		background: #41644A;
		border-radius: 20rpx;
		color: #fff;
		margin: 40rpx 0;
	}

	.bg {
		width: 60rpx;
		height: 60rpx;
		background: #EEEEEE;
		font-size: 40rpx;
		font-weight: bold;
	}

	.numBox {
		padding: 0 30rpx;
	}


	.applyRefund {
		padding: 30upx;
		box-sizing: border-box;
		color: #333333;

		.goodsInfo {
			padding: 30upx 24upx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10upx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20upx;

			image {
				width: 160upx;
				height: 144upx;
				border-radius: 10upx;
			}

			.goods_texts {
				line-height: 43rpx;
				flex: 1;
				margin: 0 18upx;

				.goods_title {

					font-size: 28upx;
				}

				.goods_num {
					font-size: 24upx;
					color: #999999;
					padding: 20upx 0 34upx;
				}

				.goods_money {
					font-size: 24upx;
					line-height: 24upx;
					font-weight: Medium;
				}
			}

			.goods_stauts {
				font-size: 24upx;
				color: #999999;
			}
		}

		.refund_info {
			background-color: #fff;
			border-radius: 10upx;
			margin-bottom: 20upx;

			>view {
				display: flex;
				align-items: center;
				padding: 40upx 22upx;
				box-sizing: border-box;
				border-bottom: 1px solid #EEEEEE;

				.info_name {
					font-size: 28upx;
					color: #282828;
					font-weight: Medium;
					margin-right: 72upx;
				}

				picker {
					flex: 1;
					font-size: 26upx;

					.tips {
						color: #999999;
					}
				}

				.refund_money {
					flex: 1;
					color: #FF4D4D;
					font-size: 26upx;
					font-weight: Medium;
				}
			}

			.refund_explain {
				flex-direction: column;
				align-items: flex-start;

				.info_name {
					margin-bottom: 20upx;
				}

				textarea {
					width: 100%;
					height: 50upx;
					font-size: 28upx;
				}
			}
		}

		.upload_img {
			padding: 40upx 22upx 20upx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10upx;

			.upload_img_t {
				display: flex;
				align-items: flex-end;
				margin-bottom: 28upx;

				.title {
					font-size: 28upx;
					font-weight: Medium;
					margin-right: 12upx;
				}

				.tips {
					font-size: 22upx;
					color: #999999;
				}
			}

			.imgList {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.img {
					width: 194upx;
					height: 194upx;
					margin-bottom: 20upx;
					position: relative;

					>image {
						width: 194upx;
						height: 194upx;
						border-radius: 10upx;
					}

					.del_btn {
						position: absolute;
						top: -18upx;
						right: -18upx;
					}
				}

				.img:not(:nth-child(3n)) {
					margin-right: 24upx;
				}
			}
		}
	}
</style>
